<template>
  <div class="default-layout">
    <el-container class="layout-container">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '220px'" class="aside">
        <div class="logo-container">
          <img src="../assets/logo.png" alt="TMS Logo" class="logo" v-if="!isCollapse">
          <img src="../assets/logo-small.png" alt="TMS" class="logo-small" v-else>
        </div>
        
        <div class="menu-container">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            :collapse="isCollapse"
            background-color="#2C62B0"
            text-color="#E1E8F5"
            active-text-color="#FFFFFF"
            router
          >
            <el-menu-item index="/" v-if="hasPermission(1)">
              <el-icon><Monitor /></el-icon>
              <template #title>仪表盘</template>
            </el-menu-item>
            
            <!-- 基础数据管理 -->
            <el-sub-menu index="/base-data" v-if="hasPermission(2)">
              <template #title>
                <el-icon><Folder /></el-icon>
                <span>基础数据</span>
              </template>
              <el-menu-item index="/base-data/enterprise" v-if="hasPermission(21)">企业/承运商管理</el-menu-item>
              <el-menu-item index="/base-data/vehicle" v-if="hasPermission(22)">车辆档案</el-menu-item>
              <el-menu-item index="/base-data/driver" v-if="hasPermission(23)">驾驶员档案</el-menu-item>
              <el-menu-item index="/base-data/route" v-if="hasPermission(24)">路线地图</el-menu-item>
              <el-menu-item index="/base-data/pricing" v-if="hasPermission(25)">计价模型</el-menu-item>
            </el-sub-menu>
            
            <!-- 订单管理 -->
            <el-sub-menu index="/orders" v-if="hasPermission(3)">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/orders/list" v-if="hasPermission(31)">订单列表</el-menu-item>
              <el-menu-item index="/orders/create" v-if="hasPermission(32)">创建订单</el-menu-item>
              <el-menu-item index="/orders/emergency" v-if="hasPermission(33)">紧急订单处理</el-menu-item>
            </el-sub-menu>
            
            <!-- 运输计划 -->
            <el-sub-menu index="/planning" v-if="hasPermission(4)">
              <template #title>
                <el-icon><MapLocation /></el-icon>
                <span>运输计划</span>
              </template>
              <el-menu-item index="/planning/route-optimization" v-if="hasPermission(41)">路径优化</el-menu-item>
              <el-menu-item index="/planning/load-optimization" v-if="hasPermission(42)">装载优化</el-menu-item>
            </el-sub-menu>
            
            <!-- 调度执行 -->
            <el-sub-menu index="/dispatch" v-if="hasPermission(5)">
              <template #title>
                <el-icon><Van /></el-icon>
                <span>调度执行</span>
              </template>
              <el-menu-item index="/dispatch/tracking" v-if="hasPermission(51)">实时跟踪</el-menu-item>
              <el-menu-item index="/dispatch/exceptions" v-if="hasPermission(52)">异常管理</el-menu-item>
            </el-sub-menu>
            
            <!-- 费用结算 -->
            <el-sub-menu index="/billing" v-if="hasPermission(6)">
              <template #title>
                <el-icon><Money /></el-icon>
                <span>费用结算</span>
              </template>
              <el-menu-item index="/billing/documents" v-if="hasPermission(61)">单据处理</el-menu-item>
              <el-menu-item index="/billing/accounting" v-if="hasPermission(62)">会计处理</el-menu-item>
            </el-sub-menu>
            
            <!-- 报表分析 -->
            <el-sub-menu index="/reports" v-if="hasPermission(7)">
              <template #title>
                <el-icon><DataAnalysis /></el-icon>
                <span>报表分析</span>
              </template>
              <el-menu-item index="/reports/kpi" v-if="hasPermission(71)">KPI仪表盘</el-menu-item>
              <el-menu-item index="/reports/business-intelligence" v-if="hasPermission(72)">商业智能</el-menu-item>
            </el-sub-menu>
            
            <!-- 系统管理 -->
            <el-sub-menu index="/system" v-if="hasPermission(8)">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/system/user" v-if="hasPermission(81)">用户管理</el-menu-item>
              <el-menu-item index="/system/role" v-if="hasPermission(82)">角色管理</el-menu-item>
              <el-menu-item index="/system/department" v-if="hasPermission(83)">部门管理</el-menu-item>
              <el-menu-item index="/system/position" v-if="hasPermission(84)">职位管理</el-menu-item>
              <el-menu-item index="/system/menu" v-if="hasPermission(85)">菜单管理</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </el-aside>
      
      <!-- 主内容区 -->
      <el-container>
        <!-- 头部 -->
        <el-header class="header">
          <div class="header-left">
            <el-icon class="collapse-btn" @click="toggleSidebar">
              <Fold v-if="!isCollapse" />
              <Expand v-else />
            </el-icon>
            <breadcrumb />
          </div>
          
          <div class="header-right">
            <el-dropdown>
              <span class="user-dropdown">
                <el-avatar :size="30" src="../assets/avatar.png" />
                <span class="username">管理员</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/user/profile')">个人资料</el-dropdown-item>
                  <el-dropdown-item @click="$router.push('/user/password')">修改密码</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <!-- 主内容 -->
        <el-main class="main">
          <router-view />
        </el-main>
        
        <!-- 页脚 -->
        <el-footer class="footer">
          <div>TMS 运输管理系统 &copy; {{ currentYear }}</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  Monitor, 
  Folder, 
  Document, 
  MapLocation, 
  Van, 
  Money, 
  DataAnalysis, 
  Setting,
  Fold, 
  Expand 
} from '@element-plus/icons-vue'
import Breadcrumb from '../components/common/Breadcrumb.vue'

const router = useRouter()
const route = useRoute()

// 侧边栏折叠状态
const isCollapse = ref(false)

// 当前年份
const currentYear = new Date().getFullYear()

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 菜单权限数据
const menuPermissions = ref([])

// 加载用户菜单权限
const loadUserMenuPermissions = () => {
  // 实际项目中应该从后端API获取当前用户的菜单权限
  // 这里模拟从本地存储获取
  const userRole = localStorage.getItem('userRole') || 'ADMIN' // 默认为管理员角色
  const permissionsStr = localStorage.getItem(`role_permissions_${userRole}`)
  
  if (permissionsStr) {
    try {
      const permissions = JSON.parse(permissionsStr)
      menuPermissions.value = permissions.menuIds || []
    } catch (error) {
      console.error('解析菜单权限失败:', error)
      // 如果解析失败，默认给予所有权限
      menuPermissions.value = [1, 2, 21, 22, 23, 24, 25, 3, 31, 32, 33, 4, 41, 42, 5, 51, 52, 6, 61, 62, 7, 71, 72, 8, 81, 82, 83, 84, 85]
    }
  } else {
    // 如果没有权限数据，默认给予所有权限
    menuPermissions.value = [1, 2, 21, 22, 23, 24, 25, 3, 31, 32, 33, 4, 41, 42, 5, 51, 52, 6, 61, 62, 7, 71, 72, 8, 81, 82, 83, 84, 85]
  }
}

// 判断菜单是否有权限显示
const hasPermission = (menuId) => {
  return menuPermissions.value.includes(menuId)
}

// 切换侧边栏
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 退出登录
const logout = () => {
  // 实际项目中应该调用登出API
  localStorage.removeItem('token')
  router.push('/auth/login')
}

// 组件挂载时加载权限
onMounted(() => {
  loadUserMenuPermissions()
})
</script>

<style scoped>
.default-layout {
  height: 100%;
}

.layout-container {
  height: 100%;
}

.aside {
  transition: width 0.3s;
  background-color: #2C62B0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.logo-container {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2C62B0;
  flex-shrink: 0;
}

.menu-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 自定义滚动条样式 */
.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.logo {
  height: 40px;
}

.logo-small {
  height: 30px;
}

.el-menu-vertical {
  border-right: none;
}

/* 子菜单项样式 */
:deep(.el-menu--inline) {
  background-color: #1E4D8F !important;
}

:deep(.el-menu-item) {
  background-color: #1E4D8F !important;
}

:deep(.el-menu-item:hover) {
  background-color: #3A70BC !important;
}

:deep(.el-menu-item.is-active) {
  background-color: #3A70BC !important;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E4E7ED;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 10px;
}

.main {
  background-color: #F5F7FA;
  padding: 20px;
  overflow-y: auto;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  border-top: 1px solid #E4E7ED;
  color: #909399;
  font-size: 14px;
}
</style>
